<template>
  <div class="category">
    <!-- 头部查询开始 -->
      <el-select v-model="value" placeholder="状态">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
        <el-button @click="showHandler" size='small' type="primary">查询</el-button>
    <!-- 头部查询结束 -->
    <!-- 表格开始 -->
        <el-table
        :data="categorys"
        style="width: 100%">
        <el-table-column
            prop="id"
            label="序号"
            width="90"
            align='center'>
        </el-table-column>
        <el-table-column label="封面" align='center'>
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <img width="100%" :src="scope.row.icon">
                <div slot="reference" class="name-wrapper">
                  <img width="30px" :src="scope.row.icon">
                </div>
              </el-popover>
            </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="风采" align='center'>
        </el-table-column>
       
        <el-table-column prop="num" label="状态" align='center'>
        </el-table-column>
        <el-table-column width='160px' label="操作" align='center'>
            <template slot-scope="scope">
                <el-button size='mini' type="success">推荐</el-button>
                <el-button @click='editHandler(scope.row)' size="mini" type="primary">审核</el-button>
                <el-button @click="deleteHandler(scope.row.id)" size="mini" type="danger">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <div class="pagination">
        <el-pagination
            layout="prev, pager, next"
            :page-size="list.pageSize"
            :total="total"
            @current-change='changeHandler'>
        </el-pagination>
    </div>
    <!-- 分页结束 -->
    <!-- 模态框开始 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <!-- 表单开始 -->
        {{ruleForm}}
        <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="栏目名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="序号" prop="name">
            <el-input v-model="ruleForm.num"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="name">
            <el-upload
              class="upload-demo"
              action="http://81.69.24.232/pet/jz_upload.php"
              multiple
              :limit="3"
              :on-success="successHandler">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <!-- 表单结束 -->
        <div slot="footer" class="dialog-footer">
          <el-button size='mini' @click="dialogFormVisible = false">取 消</el-button>
          <el-button size='mini' type="primary" @click="submitHandler">确 定</el-button>
        </div>
      </el-dialog>
    <!-- 模态框结束 -->
  </div>
</template>


<script>
import {mapState,mapActions} from 'vuex'
export default {
  data(){
    return {
      options: [{
          value: '选项1',
          label: '未审核'
        }, {
          value: '选项2',
          label: '审核通过'
        }, {
          value: '选项3',
          label: '审核不通过'
        }, {
          value: '选项4',
          label: '推荐'
        }],
      list:{
        page:1,
        pageSize:10
      },
      value: '',
      dialogFormVisible:false,
      ruleForm:{},
      title:'添加栏目信息',
      
    }
  },
  computed:{
    ...mapState('category',['categorys','total'])
  },
  methods:{
    ...mapActions('category',['findAllCategory','saveCategory','deleteCategory']),
    //分页
    changeHandler(page){
      this.list.page = page
      this.findAllCategory(this.list)
    },
    //去添加栏目信息
    showHandler(){
      this.dialogFormVisible = true
    },
    //提交保存
    submitHandler(){
      this.saveCategory(this.ruleForm).then(res =>{
        console.log(res);
        if(res.status === 200){
          this.dialogFormVisible = false
          this.findAllCategory(this.list)
          this.$message({
            type: 'success',
            message:res.message
          })
        }else {
          this.$message({
            type: 'error',
            message:res.message
          })
        }
      })
    },
    //编辑栏目信息
    editHandler(data){
      // 将当前行的内容，赋值给我们的ruleForm
        this.ruleForm = data
        this.title = '编辑栏目信息'
      //打开模态框
        this.dialogFormVisible = true
    },
    //删除栏目信息
      deleteHandler(id){
        let params = {
          id
        }
        this.deleteCategory(params).then(res =>{
          if(res.status === 200){
            this.findAllCategory(this.list)
            this.$message({
              type:'success',
              message: res.message
            })
          }else {
              this.$message({
              type:'error',
              message: res.message
            })
          }
        })
      },
      //文件上传成功时
      successHandler(file){
        //将拿到的图片地址，保存到我们栏目信息的对象中(ruleForm)
        this.ruleForm.icon = file
      }
  },
  created(){
    this.findAllCategory(this.list)
  }
}
</script>
<style scoped>
.pagination {
  float:right;
}
</style>
